<template>
  <div class="mv">
    <div class="mv-conter">
      <div class="mv-box">
        <div class="h2-h">
          <div class="icon"></div>
          <h2>【{{ mvDetail.name }}】</h2>
          <a href="javascript:;">{{ mvDetail.artistName }}</a>
        </div>

        <video
          :src="this.$store.state.mv.url"
          width="100%"
          height="100%"
          autoplay
          controls
        ></video>
        <!-- 切换分辨率 -->
        <el-popover placement="top-start" width="70" trigger="hover">
          <div class="box">
            <div
              v-for="item in viedoList"
              :key="item.r"
              class="box-item"
              :class="item.r == r ? 'active' : ''"
              @click="itemClick(item.r)"
            >
              <span v-if="item.r == r">√</span>
              {{ item.name }}
            </div>
          </div>
          <el-button slot="reference" size="mini">切换分辨率</el-button>
        </el-popover>
      </div>

      <comments :total="total" :comments="comments"></comments>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="mvInfo.limit"
        :current-page="mvInfo.offset / mvInfo.limit + 1"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
    <main-footer></main-footer>
  </div>
</template>

<script>
import { mvDetail } from '@/utils/class.js'
import { getMvDetail, getMvComment } from '@/api/api.js'
import mainFooter from '../../../components/common/mainFooter.vue'
import Comments from '../../../components/common/comments.vue'
// import CommitInput from '../../../components/common/commitInput.vue'
export default {
  components: { mainFooter, Comments },
  data() {
    return {
      mvDetail: {},
      // 评论请求参数
      mvInfo: {
        limit: 20,
        offset: 0,
        before: ''
      },
      total: 0,
      // 评论
      comments: [],
      viedoList: [
        {
          name: '1080p',
          r: 1080
        },
        {
          name: '超清',
          r: 720
        },
        {
          name: '高清',
          r: 480
        },
        {
          name: '标清',
          r: 360
        }
      ],
      r: window.localStorage.getItem('r') ?? 1080
    }
  },
  created() {
    this.getMvUrl(this.r)
    this.getMvDetail()
  },
  methods: {
    // 换页
    currentChange(newPage) {
      this.mvInfo.offset = (newPage - 1) * this.mvInfo.limit
      this.getMvComments()
    },
    // URL
    getMvUrl(r) {
      let payload = {
        id: this.$route.query.id,
        r: r
      }
      this.$store.commit('savaMvUrl', {})
      this.$store.dispatch('savaMvUrl', payload)
    },
    // 细节
    async getMvDetail() {
      const res = await getMvDetail(this.$route.query.id)
      console.log(res)
      this.mvDetail = new mvDetail(res.data)
      console.log(this.mvDetail)
      this.getMvComments()
    },
    // 评论
    async getMvComments() {
      const comment = await getMvComment(this.$route.query.id, this.mvInfo)
      this.total = comment.total
      this.comments = comment.comments
      for (let imgs of this.comments) {
        imgs.user.avatarUrl += '?param=50y50'
      }
      console.log(this.comments)
    },
    // 切换分辨率
    itemClick(itemR) {
      this.r = itemR
      window.localStorage.setItem('r', itemR)
      this.getMvUrl(this.r)
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  background: #373c42;
  color: #fff;
}
.box {
  // background: #040a13;
  color: #000;
  height: 100%;
  .box-item {
    width: 100%;
    height: 25%;
    text-align: center;
    &:hover {
      cursor: pointer;
      background: #373c42;
    }
  }
}
.el-button {
  margin-top: 10px;
}
.el-pagination {
  margin: 20px 200px 0;
}
.h2-h {
  width: 100%;
  display: flex;
  align-items: center;
  .icon {
    margin: 7px 5px auto 0;
    width: 29px;
    height: 18px;
    background: url('https://s2.music.126.net/style/web2/img/icon2.png?019ec21a7187e1bc8ceffb1c17266bd9')
      no-repeat 0 9999px;
    background-position: -230px -480px;
  }
  h2 {
    font-weight: normal;
    font-size: 24px;
  }
  a {
    margin-top: 8px;
    color: #0c73c2;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

.mv-conter {
  width: 980px;
  background: #fff;
  margin: 0 auto;
  padding: 40px 80px 10px;
  border: 1px solid #ccc;
}
video {
  margin-top: 10px;
}
</style>
